<template>
<div class="storage-contentMain-detail container-1200">
    <div class="wy-main-title wy-m-t-20">
        <p>
            <nuxt-link to="./../info/index">首页</nuxt-link> /  物流信息服务  /  仓储信息  / 
            <span>{{detail.title}}</span>
        </p>
    </div>
    <!-- 详情 -->
    <div class="stro-detail" v-if="ids == '01'">
            <div class="stro-city">
	            <div class="high-banner-box">
	                <div class='high-banner-change'>
	                    <img :src="detail.imgUrl">
	                </div>
	                <div class="high-detail">
						<h2>{{detail.title}}</h2>     
	                    <p>公司:<span>{{detail.company}}</span></p>
						<p>仓储类型：<span>{{detail.type}}</span></p>
	                    <p>仓储面积:<span>{{detail.measure}}</span></p>
	                    <p>出租价格:<span>{{detail.rentalrates}}</span></p>
	                    <p>联系人:<span>{{detail.linkman}}</span></p>
	                    <p>联系电话:<span>{{detail.tel}}</span></p>
	                    <p>仓储地址:<span>{{detail.address}}</span></p>
	                </div>
	            </div>
              <!-- 出租说明 -->
	            <div class="stro-company-profile">
	                <div class="stro-main-title">仓储简介</div>
	                <div class="company-profile-content">
	                    <p>{{detail.explain}}</p>
	                </div>
	            </div>
	           <!-- 出租说明 -->
	            <div class="stro-company-profile hire-content">
	                <div class="stro-main-title">地理位置</div>
	                <!-- 地图搜索 -->
	                <iframe class="company-profile-content" :src="detail.addresslink"></iframe>
	                <a-button type="primary">我要租</a-button>
	            </div>
            </div>
           	<div class="stro-concat">
                <div class="stro-main-title">联系方式</div>
                <div class="concat-content">
                    <h3>北京荣之联科技股份有限公司</h3>
                    <div>
                        <span>用户星级</span>
                        <a-rate :defaultValue="2.5" allowHalf />
                    </div>
                </div>
                <div class="concat-renzhen">
                    <a-button>已认证</a-button>
                </div>
                <!-- 分割线 -->
                <div class="concat-line"></div>
                <!-- <p>公司地址：北京朝阳IT电子城</p> -->
                <p>详细地址：北京朝阳酒仙桥东路10号院5号楼</p>
                <p>成立时间：2001年6月18日</p>
                <p>联系人：刘珊珊</p>
           	</div>
    </div>
	<div class="stro-detail" v-if="ids == '02'">
            <div class="stro-city">
	            <div class="high-banner-box">
	                <div class='high-banner-change'>
	                    <img :src="detail.imgUrl">
	                </div>
	                <div class="high-detail">
						<h2>{{detail.title}}</h2>     
	                    <p>网点名称:<span>{{detail.company}}网点名称:</span></p>
						
	                    <p>网点面积:<span>{{detail.measure}}</span></p>
	                    <p>出租价格:<span>{{detail.rentalrates}}</span></p>
	                    <p>联系人:<span>{{detail.linkman}}</span></p>
	                    <p>联系电话:<span>{{detail.tel}}</span></p>
	                    <p>网点地址:<span>{{detail.address}}</span></p>
	                </div>
	            </div>
              <!-- 出租说明 -->
	            <div class="stro-company-profile">
	                <div class="stro-main-title">网点简介</div>
	                <div class="company-profile-content">
	                    <p>{{detail.explain}}</p>
	                </div>
	            </div>
	           <!-- 出租说明 -->
	            <div class="stro-company-profile hire-content">
	                <div class="stro-main-title">地理位置</div>
	                <!-- 地图搜索 -->
	                <iframe class="company-profile-content" :src="detail.addresslink"></iframe>
	                <a-button type="primary">我要租</a-button>
	            </div>
            </div>
           	<div class="stro-concat">
                <div class="stro-main-title">联系方式</div>
                <div class="concat-content">
                    <h3>北京荣之联科技股份有限公司</h3>
                    <div>
                        <span>用户星级</span>
                        <a-rate :defaultValue="2.5" allowHalf />
                    </div>
                </div>
                <div class="concat-renzhen">
                    <a-button>已认证</a-button>
                </div>
                <!-- 分割线 -->
                <div class="concat-line"></div>
                <!-- <p>公司地址：北京朝阳IT电子城</p> -->
                <p>详细地址：北京朝阳酒仙桥东路10号院5号楼</p>
                <p>成立时间：2001年6月18日</p>
                <p>联系人：刘珊珊</p>
           	</div>
    </div>
 </div>
</template>
<script>
	import { infoStorage } from './../../../utils/infoStorage'
	export default{
		data(){
			return{
				   detail: {},
				   ids:'',
				   id:''
			}
		},
		created:function(){
			this.id = this.$route.query.id
			this.ids = this.$route.query.ids

			infoStorage.find((item,index)=>{
				if (item.id == this.ids) {
					this.detail = item;
				}
			})
		},
		watch:{
			'$route': function (){
				 this.id = this.$route.query.id
                 this.ids = this.$route.query.ids
			}
		}
	}
</script>
<style lang="scss">
.storage-contentMain-detail {
    .wy-main-title{
        a{
      	    color:#666666;
        }
    }
   //公共标题样式
    .stro-main-title{
			width:400px;
			height:46px;
			background:#F7F7F7;
			color:#15837A;
			font-size:16px;
			border-bottom:1px solid #D8D8D8;
			padding-left:20px;
			font-weight:500;
			line-height:46px;
	}
   //详情内容
    .stro-detail{
		.stro-city{
			width:740px;
			float:left;
			margin-top:26px;
			//商品图片
			.high-title{
				text-align:center;
				h3,p{
					margin:0;
					padding:0;
				}
				h3{
					font-size:24px;
					color:#15837A;
					line-height:23px;
				}
				.high-time{
				  margin-top:22px;
				  span{
				  	font-size:14px;
				  	color:#999999;
				  	line-height:14px;
				  }
				  span:nth-child(2){
				  	margin-left:15px;
				  }
				}
			}
			.high-banner-box{
			    margin-top:26px;
			    height:280px;
			    //左边轮播切换
			    .high-banner-change{
				  	width:330px;
				  	height:280px;
				  	float:left;
				  	img{
				  		width: 100%;
				  		height: 100%;
				  	}
			  	}
			  //右边详情
				.high-detail{
				  	float:left;
				  	margin-left:30px;
				  	// margin-top:42px;
					width: 380px;
					h2{
						font-size: 24px;
                        color: #15837A;
                        font-weight: 500;
						margin: 0;
						margin-top: -10px;
                        margin-bottom: 20px;
					  }
				  	p{
				  		font-size:14px;
				  		color:#333333;
				  	}
				  	span{
				  		margin-left:10px;
				  	}
				}
			}
			//出租说明
			.stro-company-profile{
				.stro-main-title{
					width:740px;
					margin-top:40px;
				}
				.company-profile-content{
					width:693px;
					margin-left:30px;
					margin-top:26px;
					border: none;
					p{
						line-height:30px;
						color:#333333;
						font-size:14px;
					}
				}
			}
		}
		//出租说明
		.hire-content{
			.company-profile-content{
				width:691px;
				height:307px;
			}
			.ant-btn{
				float:right;
				margin-right:54px;
				margin-top:27px;
				margin-bottom:36px;
			}
		}
		//联系方式
		.stro-concat{
			width:400px;
			float:right;
			margin-top:26px;
			.concat-content{
				margin-left:20px;
				h3{
					margin:0;
					padding:0;
					fot-size:18px;
					color:#15837A;
					font-weight:500;
					margin-top:26px;
					margin-bottom:20px;
				}
				div{
					span{
					  font-size:14px;
					  color:#333333;
					  margin-right:10px;
					}
				}
			}
			//认证
			.concat-renzhen{
				width:80px;
				height:26px;
				margin-left:20px;
				margin-top:15px;
				button{
					outline:none;
					border:none;
					background:#FFA200;
					color:#FFFFFF;
					font-sizstro-citye:14px;
					border-radius:2px !important;
				}
			}
			.concat-line{
				width:376px;
				height:1px;
				border:1px solid #D8D8D8;
				margin-top:34px;
				margin-bottom:20px;
				margin-left:20px;
			}
			p{
				font-size:14px;
				color:#333333;
				line-height:18px;
				margin-left:20px;
			}
		}
	}
}
</style>